<template>
  <div class="change-password">
    <el-form
      :model="information"
      :rules="rules"
      label-position="top"
      label-width="80px"
      ref="form"
    >
      <el-form-item label="新密码" prop="newPassword1">
        <el-input
          v-model="information.newPassword1"
          type="password"
          name="newPassword1"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="newPassword2">
        <el-input
          v-model="information.newPassword2"
          type="password"
          name="newPassword2"
        ></el-input>
      </el-form-item>
      <div class="submit">
        <input type="button" value="确定" @click="submitForm" />
      </div>
    </el-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref } from "vue";
import { ChangePasswordParams, UserService } from "@/utils/api/user";
import { ElMessage } from 'element-plus';

export default defineComponent({
  props: {
    phoneNumber: String,
  },
  setup(props, context) {
    const information: Ref<ChangePasswordParams> = ref({
      phoneNumber: "",
      newPassword1: "",
      newPassword2: "",
    });
    information.value.phoneNumber = props.phoneNumber as string;
    const form = ref(null);
    const submitForm = () => {
      let flag;
      (form.value as any).validate((valid: boolean) => {
        flag = valid;
        if (valid) {
          return true;
        } else {
          return false;
        }
      });
      if (flag === true) {
        UserService.changePassword(information.value)
          .then((res) => {
            console.log(res.data);
            if (res.data.a == 18) {
              context.emit("confirmChange");
            } else {
              openError('修改失败，请联系管理员！');
            } 
          })
          .catch((error) => {
            console.log(error);
          });
      }
    };
    const checkNewPassword1 = (rule: any, value: any, callback: any) => {
      if (!value) {
        return callback(new Error("新密码不能为空"));
      }
      let r = /^\.{6,15}$/;
      if (!r.test(value)) {
        return callback(new Error('密码应该为6到15个字符'));
      }
      callback();
    };
    const checkNewPassword2 = (rule: any, value: any, callback: any) => {
      if (!value) {
        return callback(new Error("确认密码不能为空"));
      }
      if (information.value.newPassword1 !== '' && information.value.newPassword1 !== value) {
        return callback(new Error('两次密码不相同'));
      }
      callback();
    };
    const rules = {
      newPassword1: [{ validator: checkNewPassword1, trigger: "submit" }],
      newPassword2: [{ validator: checkNewPassword2, trigger: "submit" }],
    };
     const openError= (inf: string) => {
          ElMessage({
            showClose: true,
            message: inf,
            type: 'error',
            offset: 200,
          });
    };  
    return {
      information,
      form,
      submitForm,
      rules,
      openError,
    };
  },
});
</script>
<style lang="scss" scoped>
@import "@/assets/css/config.scss";
.el-form-item {
  text-align: left;
}
.el-input {
  width: 320px;
}
div.submit {
  text-align: left;
}
input[type="button"] {
  cursor: pointer;
  background: $themeRed;
  color: white;
  padding: 15px 0;
  letter-spacing: 8px;
  text-indent: 8px;
  width: 320px;
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 18px;
  border: none;
  outline: none;
  border-radius: 6px;
}
</style>

